<template>
  <div style="display: inline-block">
    <div @click="visible = true" class="header-right-icon header-action">
      <Icon type="md-more" size="20"/>
    </div>

    <Drawer :title="$t('themeTitle')" v-model="visible" width="300">
      <div class="theme-setting">
        <div class="theme-item-content">
          <h3 class="title">{{ $t("wholeSetting") }}</h3>
          <div class="checkbox-content">
            <Tooltip transfer placement="top" :content="$t('lightblue')">
              <div
                  class="checkbox-item checkbox-item-primary"
                  @click="changeMainTheme('primary')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="mainTheme == 'primary'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('white')">
              <div
                  class="checkbox-item checkbox-item-light"
                  @click="changeMainTheme('light')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="mainTheme == 'light'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('topNav')">
              <div
                  class="checkbox-item checkbox-item-nav-black checkbox-item-nav"
                  @click="changeMainTheme('topNav')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="mainTheme == 'topNav'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('darkMode')">
              <div
                  class="checkbox-item checkbox-item-darkMode"
                  @click="changeMainTheme('darkMode')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    color="#177ddc"
                    v-if="mainTheme == 'darkMode'"
                />
              </div>
            </Tooltip>
          </div>
        </div>
        <Divider/>
        <div class="theme-item-content">
          <h3 class="title">{{ $t("sideMenu") }}</h3>
          <div class="checkbox-content">
            <Tooltip transfer placement="top" :content="$t('darkblue')">
              <div
                  class="checkbox-item checkbox-item-darkblue"
                  @click="changeMenuTheme('darkblue')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="menuTheme == 'darkblue'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('dark')">
              <div
                  class="checkbox-item checkbox-item-black"
                  @click="changeMenuTheme('black')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="menuTheme == 'black'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('middle')">
              <div
                  class="checkbox-item checkbox-item-dark"
                  @click="changeMenuTheme('dark')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="menuTheme == 'dark'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('white')">
              <div
                  class="checkbox-item checkbox-item-side-light"
                  @click="changeMenuTheme('light')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="menuTheme == 'light'"
                />
              </div>
            </Tooltip>
          </div>
        </div>
        <div class="theme-item-content">
          <h3 class="title">{{ $t("navMenu") }}</h3>
          <div class="checkbox-content">
            <Tooltip transfer placement="top" :content="$t('darkblue')">
              <div
                  class="checkbox-item checkbox-item-nav-darkblue checkbox-item-nav"
                  @click="changeNavTheme('darkblue')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="navTheme == 'darkblue'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('dark')">
              <div
                  class="checkbox-item checkbox-item-nav-black checkbox-item-nav"
                  @click="changeNavTheme('black')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="navTheme == 'black'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('lightblue')">
              <div
                  class="checkbox-item checkbox-item-nav-primary checkbox-item-nav"
                  @click="changeNavTheme('primary')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="navTheme == 'primary'"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('white')">
              <div
                  class="checkbox-item checkbox-item-nav-light checkbox-item-nav"
                  @click="changeNavTheme('light')"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="navTheme == 'light'"
                />
              </div>
            </Tooltip>
          </div>
        </div>
        <Divider/>
        <div style="margin-bottom: 24px">
          <h3 class="title">{{ $t("navMode") }}</h3>
          <div class="checkbox-content">
            <Tooltip transfer placement="top" :content="$t('rightTop')">
              <div
                  class="checkbox-item checkbox-item-topright checkbox-layout-item"
                  @click="changeFixNav(false)"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="!fixNav"
                />
              </div>
            </Tooltip>
            <Tooltip placement="top" :content="$t('topFix')">
              <div
                  class="checkbox-item checkbox-item-top checkbox-layout-item"
                  @click="changeFixNav(true)"
              >
                <Icon
                    type="md-checkmark"
                    class="checkbox-select-icon"
                    v-if="fixNav"
                />
              </div>
            </Tooltip>
          </div>
          <div class="theme-list">
            <div class="theme-list-item">
              <div class="item-title">{{ $t("navType") }}</div>
              <Select
                  :value="navType"
                  @on-change="changeNavType"
                  style="width: 150px"
                  size="small"
              >
                <Option value="1">{{ $t("horizontal") }}</Option>
                <Option value="2">{{ $t("singleDrop") }}</Option>
                <Option value="3">{{ $t("iconBreadcrumb") }}</Option>
              </Select>
            </div>
            <div class="theme-list-item" v-if="navType == 1">
              <div class="item-title">{{ $t("sliceNum") }}</div>
              <InputNumber
                  :min="1"
                  :max="10"
                  :value="sliceNum"
                  style="width: 100px"
                  size="small"
                  @on-change="changeSliceNum"
              />
            </div>
            <div class="theme-list-item" v-if="navType == 1">
              <div class="item-title">{{ $t("showIcon") }}</div>
              <i-switch
                  :value="showNavMenuIcon"
                  @on-change="changeShowNavMenuIcon"
                  size="small"
              />
            </div>
            <div class="theme-list-item" v-if="navType == 2 || navType == 3">
              <div class="item-title">{{ $t("dropMenu") }}</div>
              <Select
                  :value="navShowType"
                  @on-change="changeNavShowType"
                  style="width: 150px"
                  size="small"
              >
                <Option value="app">{{ $t("appStyle") }}</Option>
                <Option value="list">{{ $t("listStyle") }}</Option>
              </Select>
            </div>
          </div>
        </div>
        <Divider/>
        <div style="margin-bottom: 24px">
          <h3 class="title">{{ $t("contentArea") }}</h3>
          <div class="theme-list">
            <div class="theme-list-item">
              <div class="item-title">{{ $t("enableTags") }}</div>
              <i-switch
                  :value="showTags"
                  @on-change="changeShowTags"
                  size="small"
              />
            </div>
            <div class="theme-list-item">
              <div class="item-title">{{ $t("showFold") }}</div>
              <i-switch
                  :value="showFold"
                  @on-change="changeShowFold"
                  size="small"
              />
            </div>
            <div class="theme-list-item">
              <div class="item-title">{{ $t("showLogo") }}</div>
              <i-switch
                  :value="showLogo"
                  @on-change="changeShowLogo"
                  size="small"
              />
            </div>
            <div class="theme-list-item">
              <div class="item-title">{{ $t("showSearchMenu") }}</div>
              <i-switch
                  :value="showSearch"
                  @on-change="changeShowSearch"
                  size="small"
              />
            </div>
            <div class="theme-list-item">
              <div class="item-title">{{ $t("showFooter") }}</div>
              <i-switch
                  :value="showFooter"
                  @on-change="changeShowFooter"
                  size="small"
              />
            </div>
            <div class="theme-list-item">
              <div class="item-title">{{ $t("sideMenuWidth") }}（px）</div>
              <InputNumber
                  :min="0"
                  :max="500"
                  :value="menuWidthNum"
                  style="width: 100px"
                  size="small"
                  @on-change="changeMenuWidth"
              />
            </div>
          </div>
        </div>
        <Divider/>
        <div style="margin-bottom: 24px">
          <h3 class="title">{{ $t("otherSetting") }}</h3>
          <div class="theme-list">
            <div class="theme-list-item">
              <div class="item-title">{{ $t("weakMode") }}</div>
              <i-switch
                  :value="weakMode"
                  @on-change="changeWeakMode"
                  size="small"
              />
            </div>
          </div>
        </div>
        <Alert type="warning" show-icon>{{ $t("themeInfo") }}</Alert>
      </div>
    </Drawer>
  </div>
</template>

<script>
export default {
  name: "theme",
  props: {},
  data() {
    return {
      visible: false,
      menuWidthNum: 220
    };
  },
  computed: {
    mainTheme() {
      return this.$store.state.theme.theme.mainTheme;
    },
    menuTheme() {
      return this.$store.state.theme.theme.menuTheme;
    },
    navTheme() {
      return this.$store.state.theme.theme.navTheme;
    },
    menuWidth() {
      return this.$store.state.theme.theme.menuWidth;
    },
    fixNav() {
      return this.$store.state.theme.theme.fixNav;
    },
    navType() {
      return this.$store.state.theme.theme.navType;
    },
    sliceNum() {
      return this.$store.state.theme.theme.sliceNum;
    },
    showTags() {
      return this.$store.state.theme.theme.showTags;
    },
    showNavMenuIcon() {
      return this.$store.state.theme.theme.showNavMenuIcon;
    },
    navShowType() {
      return this.$store.state.theme.theme.navShowType;
    },
    showFold() {
      return this.$store.state.theme.theme.showFold;
    },
    showLogo() {
      return this.$store.state.theme.theme.showLogo;
    },
    showSearch() {
      return this.$store.state.theme.theme.showSearch;
    },
    showFooter() {
      return this.$store.state.theme.theme.showFooter;
    },
    weakMode() {
      return this.$store.state.theme.theme.weakMode;
    },
  },
  methods: {
    changeMainTheme(v) {
      // this.$store.commit("setMainTheme", v);
      // if (v == "primary") {
      //   this.$store.commit("setMenuTheme", "light");
      //   this.$store.commit("setNavTheme", "primary");
      //   this.$store.commit("setFixNav", true);
      //   this.$store.commit("setShowTags", true);
      //   this.$store.commit("setMenuWidth", 220);
      // } else if (v == "light") {
      //   this.$store.commit("setMenuTheme", "light");
      //   this.$store.commit("setNavTheme", "light");
      //   this.$store.commit("setFixNav", false);
      //   this.$store.commit("setShowTags", true);
      //   this.$store.commit("setMenuWidth", 220);
      // } else if (v == "darkMode") {
      //   this.$store.commit("setMenuTheme", "light");
      //   this.$store.commit("setNavTheme", "light");
      // } else if (v == "topNav") {
      //   this.$store.commit("setMenuTheme", "black");
      //   this.$store.commit("setNavTheme", "black");
      //   this.$store.commit("setFixNav", true);
      //   this.$store.commit("setShowTags", false);
      //   this.$store.commit("setMenuWidth", 0);
      // }
    },
    changeMenuTheme(v) {
      this.$store.commit("setMenuTheme", v);
    },
    changeNavTheme(v) {
      this.$store.commit("setNavTheme", v);
    },
    changeFixNav(v) {
      this.$store.commit("setFixNav", v);
    },
    changeNavType(v) {
      this.$store.commit("setNavType", v);
    },
    changeSliceNum(v) {
      this.$store.commit("setSliceNum", v);
    },
    changeShowNavMenuIcon(v) {
      this.$store.commit("setShowNavMenuIcon", v);
    },
    changeNavShowType(v) {
      this.$store.commit("setNavShowType", v);
    },
    changeShowTags(v) {
      this.$store.commit("setShowTags", v);
    },
    changeShowFold(v) {
      this.$store.commit("setShowFold", v);
    },
    changeShowLogo(v) {
      this.$store.commit("setShowLogo", v);
    },
    changeShowSearch(v) {
      this.$store.commit("setShowSearch", v);
    },
    changeShowFooter(v) {
      this.$store.commit("setShowFooter", v);
    },
    changeMenuWidth(v) {
      this.$store.commit("setMenuWidth", v);
    },
    changeWeakMode(v) {
      if (v) {
        this.$store.commit("setMainTheme", "weakMode");
      } else {
        this.$store.commit("setMainTheme", "");
      }
    },
  },
  watch: {},
};
</script>

<style lang="less">
.theme-setting {
  .theme-item-content {
    margin-bottom: 8px;
  }

  .title {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 22px;
  }

  .checkbox-content {
    display: flex;
    flex-wrap: wrap;
    min-height: 42px;
  }

  .checkbox-item {
    position: relative;
    width: 44px;
    height: 36px;
    margin: 0 16px 16px 0;
    overflow: hidden;
    background-color: #f0f2f5;
    border-radius: 4px;
    box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }

  .checkbox-select-icon {
    position: absolute;
    right: 5px;
    bottom: 2px;
    color: #1890ff;
    font-weight: 700;
    font-size: 16px;
    pointer-events: none;
  }

  .checkbox-item:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background-color: #fff;
    content: "";
  }

  .checkbox-item:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background-color: #fff;
    content: "";
  }

  // light
  .checkbox-item-light:before {
    background-color: #fff;
  }

  .checkbox-item-light:after {
    background-color: #fff;
  }

  .checkbox-item-primary:after {
    background-color: #2d8cf0;
  }

  // darkblue
  .checkbox-item-darkblue:before {
    z-index: 1;
    background-color: #002b88;
  }

  // black
  .checkbox-item-black:before {
    z-index: 1;
    background-color: #1f1f1f;
  }

  // dark
  .checkbox-item-dark:before {
    z-index: 1;
    background-color: rgb(81, 90, 110);
  }

  // 暗黑
  .checkbox-item-darkMode {
    background-color: rgba(0, 21, 41, 0.85);
  }

  .checkbox-item-darkMode:before {
    background-color: rgba(0, 21, 41, 0.65);
  }

  .checkbox-item-darkMode:after {
    background-color: rgba(0, 21, 41, 0.85);
  }

  // topright
  .checkbox-item-topright:before {
    z-index: 1;
    background-color: #fff;
  }

  .checkbox-item-topright:after {
    background-color: #001529;
  }

  // top
  .checkbox-item-top:after {
    background-color: #001529;
  }

  // side-light
  .checkbox-item-side-light {
    background-color: #f0f2f5;
  }

  .checkbox-item-side-light:before {
    z-index: 1;
    background-color: #fff;
  }

  .checkbox-item-side-light:after {
    background-color: #f0f2f5;
  }

  // nav
  .checkbox-item-nav:before {
    background-color: #f0f2f5;
  }

  // nav-light
  .checkbox-item-nav-light:after {
    z-index: 1;
    background-color: #fff;
  }

  // nav-darkblue
  .checkbox-item-nav-darkblue:after {
    z-index: 1;
    background-color: #002b88;
  }

  // nav-black
  .checkbox-item-nav-black:after {
    z-index: 1;
    background-color: #1f1f1f;
  }

  // nav-primary
  .checkbox-item-nav-primary:after {
    z-index: 1;
    background-color: #2d8cf0;
  }

  .theme-list {
    display: flex;
    flex-direction: column;

    .theme-list-item {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item-title {
      }
    }
  }

  .ivu-divider-horizontal {
    margin: 16px 0;
  }

  .ivu-alert-with-icon {
    padding: 8px 10px 8px 38px;
  }
}
</style>
